<template>
    <div class='homebox'>
        <div class="left-box">
            <div class="header">任务统计</div>
            <div class="count-box">
                <ul>
                    <!-- <li>
                        <h3>训练名称</h3>
                        <p :title="trainName" style="font-size: 3vh;height:5vh;line-height:5vh;">{{trainName}}</p>
                        <div></div>
                    </li> -->
                    <li>
                        <h3>任务总数</h3>
                        <p :title="taskTotal">{{taskTotal}}</p>
                        <div></div>
                    </li>
                    <li>
                        <h3>成功任务数</h3>
                        <p :title="successNum">{{successNum}}</p>
                        <div></div>
                    </li>
                    <li>
                        <h3>失败任务数</h3>
                        <p :title="failNum">{{failNum}}</p>
                        <div></div>
                    </li>
                </ul>
                <div class="peibox">
                    <cpei :linedata="peiData" :total="taskTotal"></cpei>
                </div>
            </div>
        </div>
        <div class="right-box">
            <div class="right-top">
                <div class="header">训练信息</div>
                <div class="dia-search">
                    <el-input
                        style="width:15vw;margin-right:0.6vw;"
                        placeholder="请输入"
                        v-model="reqParamsTrain.trainName"
                        clearable
                        size="mini">
                        <template #prefix>
                            <i class="el-input__icon el-icon-search"></i>
                        </template>
                    </el-input>
                    <el-button type="primary" size="mini" @click="getTrainList(null)">查询</el-button>
                    <el-button type="success" size="mini" @click="$router.push('/graphPage')">图谱</el-button>
                </div>
                <div class="table-box">
                    <comTable
                        @findPage="getTrainList"
                        @handleAction="handleActionTrain"
                        :data="tableDataTrain"
                        :options="options"
                        :pageRequest="reqParamsTrain"
                        :columns="columnsTrain"
                        ref="comtableTrain"
                    ></comTable> 
                </div>
            </div>
            <div class="right-bottom">
                <div class="header">{{trainName}} - 任务信息</div>
                <div class="dia-search">
                    <el-input
                        style="width:15vw;margin-right:0.6vw;"
                        placeholder="请输入"
                        v-model="reqParamsTask.taskName"
                        clearable
                        size="mini">
                        <template #prefix>
                            <i class="el-input__icon el-icon-search"></i>
                        </template>
                    </el-input>
                    <el-button type="primary" size="mini" @click="getTaskList(null)">查询</el-button>
                    <el-button type="success" size="mini" @click="$router.push('/graphPage')">图谱</el-button>
                </div>
                <div class="table-box">
                    <comTable
                        @findPage="getTaskList"
                        @handleAction="handleActionTask"
                        :data="tableDataTask"
                        :options="options"
                        :pageRequest="reqParamsTask"
                        :columns="columnsTask"
                        ref="comtable"
                    ></comTable> 
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import comTable from '../components/Table/comTable'
import {errortip,successtip,warningtip} from '@/utils/util.js';
import cpei from '../components/Chart/cpei.vue';
export default {
    name: '',
    data () {
        return {
            taskTotal: 0,
            taskAdd: 0,
            successNum: 0,
            failNum: 0,
            peiData: [],
            trainName: '',
            trainId: '',
            options: {
                loading: false,         // 表格加载动画
                index: true,            // 是否显示序号
                stripe: false,         // 是否为斑马纹
                border: true,          // 是否有边框
                initTable: false,        // 是否一挂载就加载数据
                highlight: false,        // 选择高亮
                height: '100%'
            },
            // 训练列表
            tableDataTrain: {
                records: [],
                total: 0
            },
            reqParamsTrain: {
                pageIndex: 1,
                pageSize: 10,
                trainName: '',
            },
            columnsTrain: [
                { label: '训练名称', link: 'trainName', handle: 'trainDetail'},
                { label: '剧情名称', prop: 'scenarioName',},
                { label: '训练开始时间', prop: 'trainStartTime', width:'150px',},
                { label: '训练结束时间', prop: 'trainEndTime', width:'150px',},
                { label: '操作', button: true, align: 'center',size: 'mini', width:'150px',
                    group: [
                        {
                            btnShift: (row, column)=> {
								return { type:'text', label: '查看图谱', style:'color:#0098E9; padding:0;', handle: 'graph', icon: "" };
                            }
                        },
                    ]
                }
            ],
            // 任务列表
            tableDataTask: {
                records: [],
                total: 0
            },
            reqParamsTask: {
                pageIndex: 1,
                pageSize: 10,
                taskName: '',
            },
            columnsTask: [
                { label: '任务名称', prop: 'taskName',},
                { label: '任务类型', prop: 'taskFlag',},
                { label: '计划开始时间', prop: 'planStartTime', width:'150px',},
                { label: '计划结束时间', prop: 'planEndTime', width:'150px',},
                { label: '训练名称', prop: 'trainName',},
                { label: '状态', htmlShift: (row)=>{
                    return `<span style="color:${row.status=='成功'?'#67C23A':'#F56C6C'};">${row.status}</span>`
                }},
                { label: '操作', button: true, align: 'center',size: 'mini', width:'150px',
                    group: [
                        {
                            btnShift: (row, column)=> {
								return { type:'text', label: '查看详情', style:'color:#E6A23C; padding:0;margin-right:10px;', handle: 'detail', icon: "" };
                            }
                        },
                        {
                            btnShift: (row, column)=> {
								return { type:'text', label: '查看图谱', style:'color:#0098E9; padding:0;', handle: 'graph', icon: "" };
                            }
                        },
                    ]
                }
            ],
        }
    },
    components: {
        comTable,
        cpei,
    },
    created() {

    },
    mounted() {
        this.getTrainList(null);
    },
    methods: {
        // 查询任务总数
        selectTaskCount() {
            let params = {
                trainId: this.trainId
            };
            this.$api.task.selectTaskCount(params).then(res => {
                if(res.code==200) {
                    this.taskTotal = res.data*1;
                } else {
                    errortip(res.msg)
                }
            })
        },
        // 查询成功和失败任务数
        selectSuccessOrFailTaskCount() {
            this.peiData = [];
            // 失败数
            let params1 = {
                ideNum: 0,
                trainId: this.trainId
            };
            this.$api.task.selectSuccessOrFailTaskCount(params1).then(res => {
                if(res.code==200) {
                    this.failNum = res.data;
                    this.peiData.push({name: '失败',value: res.data})
                } else {
                    errortip(res.msg)
                }
            })
            // 成功数
            let params2 = {
                ideNum: 1,
                trainId: this.trainId
            };
            this.$api.task.selectSuccessOrFailTaskCount(params2).then(res => {
                if(res.code==200) {
                    this.successNum = res.data;
                    this.peiData.push({name: '成功',value: res.data})
                } else {
                    errortip(res.msg)
                }
            })
        },
        // 获取训练列表
        getTrainList(data) {
            if (data !== null) {
                this.reqParamsTrain.pageIndex = data.pageRequest.pageIndex;
                this.reqParamsTrain.pageSize = data.pageRequest.pageSize;
            }
            let params = this.reqParamsTrain;
            this.$api.train.getNodesLabels(params).then(res => {
                if(res.code==200) {
                    this.tableDataTrain = res.data;
                    this.trainName = res.data.records[0].trainName;
                    this.trainId = res.data.records[0].trainId;
                    this.getTaskList(null);
                    this.selectTaskCount();
                    this.selectSuccessOrFailTaskCount();
                } else {
                    errortip(res.msg)
                }
            })
            .then(data != null ? data.callback : "");
        },
        // 获取任务列表
        getTaskList(data) {
            if (data !== null) {
                this.reqParamsTask.pageIndex = data.pageRequest.pageIndex;
                this.reqParamsTask.pageSize = data.pageRequest.pageSize;
            }
            let params = this.reqParamsTask;
            params.trainId = this.trainId
            this.$api.task.getNodesLabels(params).then(res => {
                if(res.code==200) {
                    this.tableDataTask = res.data;
                } else {
                    errortip(res.msg)
                }
            })
            .then(data != null ? data.callback : "");
        },
        handleActionTrain: function(obj){
            if(obj.handle=='trainDetail') {
                this.trainName = obj.row.trainName;
                this.trainId = obj.row.trainId;
                this.getTaskList(null)
                this.selectTaskCount();
                this.selectSuccessOrFailTaskCount();
            }
            if(obj.handle=='graph') {
                this.$router.push({path: '/graphPage',query: {keywords: obj.row.trainName}})
            }
        },
        handleActionTask: function(obj){
            if(obj.handle=='detail') {
                this.$router.push({path: '/dataDetail',query: {id: obj.row.taskId,name: obj.row.taskName}})
            }
            if(obj.handle=='graph') {
                this.$router.push({path: '/graphPage',query: {keywords: obj.row.taskName}})
            }
        },
    },
}
</script>

<style lang='scss' scoped>
.homebox{
    display: flex;
    height: 100%;
    .left-box {
        flex: 1;
        overflow: hidden;
        border: 1px solid #044A7C;
        border-radius: 5px;
        margin-right: 1vw;
        background: #031D38;
        .header {
            height: 4vh;
            background: url('../assets/img/title-bg.png') no-repeat center;
            background-size: 100% 100%;
            width: 70%;
            position: relative;
            margin-top: -2px;
            left: 15%;
            text-align: center;
            line-height: 4vh;
            color: #1993DB;
        }
        .count-box {
            text-align: center;
            padding: 2vh 1vw;
            height: calc(100% - 5vh);
            display: flex;
            flex-direction: column;
            .peibox {
                flex: 1;
            }
            // ul {
            //     height: 100%;
            //     display: flex;
            //     flex-direction: column;
            //     justify-content: space-around;
            // }
            li {
                padding: 4.5vh 0;
                border-bottom: 1px solid #1B3D70;
                h3 {
                    font-size: 2.4vh;
                    font-weight: 700;
                    text-shadow: 0 0 5px #0AB7FD;
                    background-image: linear-gradient(0deg,#02EEFE,#01B1F3);
                    background-clip: text;
                    color: transparent;
                    font-family: 'Agency FB';
                }
                p {
                    font-size: 5vh;
                    font-weight: 600;
                    background-image: linear-gradient(0deg,#FEE51A,#FEBC14,#FF9C00);
                    background-clip: text;
                    color: transparent;
                    font-family: 'Agency FB';
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                div {
                    margin-top: -1.5vh;
                    height: 3.6vh;
                    background: url('../assets/img/text_bg.png') no-repeat center;
                    background-size: 100% 100%;
                }
            }
        }
    }
    .right-box {
        flex: 4;
        overflow: hidden;
        .header {
            height: 4vh;
            background: url('../assets/img/title-bg.png') no-repeat center;
            background-size: 100% 100%;
            max-width: 16%;
            position: relative;
            margin-top: -1px;
            left: 4%;
            text-align: center;
            line-height: 4vh;
            color: #1993DB;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0 3vw;
        }
        .table-box {
            height: calc(100% - 11vh);
            margin-top: 1.5vh;
            padding: 0 1vw;
        }
        .right-top, .right-bottom {
            height: calc(50% - 1.2vh);
            border: 1px solid #044A7C;
            border-radius: 5px;
            background: #031D38;
            position: relative;
        }
        .right-top {
            margin-bottom: 2vh;
        }
        .dia-search {
            position: absolute;
            right: 1vw;
            top: 1vh;
        }
    }
}
</style>
